import QtQuick 2.0

Rectangle {
    id: root
    anchors.fill: parent

    ///////////////// ListView ////////////////////
    Rectangle {
        id: listViewExam
        width: parent.width
        height: 100
        border.color: "black"
        ListView {
            anchors.fill: parent
            anchors.margins: 20
            anchors.centerIn: parent
            spacing: 15
            // 边界裁剪
            clip: true
            // 首末拖拽效果动画
            boundsBehavior: Flickable.DragOverBounds
            // 拖拽位置设置
            snapMode: ListView.SnapOneItem
            // 水平方向布局
            orientation: ListView.Horizontal
            // 元素排列方向
            layoutDirection: Qt.RightToLeft
            model: 10
            delegate: dlg
            // 高亮元素
            highlight: hightlightdlg
            // 头尾
            header: header
            footer: footer
            focus: true
        }
    }
    // 高亮元素仅实例化一次
    Component {
        id: hightlightdlg
        Item {
            width: ListView.view.width
            height: ListView.view.currentItem.height
            // 绑定有效元素的x坐标
            x: ListView.view.currentItem.x
            // 高亮元素移动动画
            Behavior on x {
                SequentialAnimation {
                    PropertyAnimation { target: hightlightRect; property: "opacity"; to: 0; duration: 80 }
                    NumberAnimation { duration: 50 }
                    PropertyAnimation { target: hightlightRect; property: "opacity"; to: 1; duration: 80 }
                }
            }
            Rectangle {
                id: hightlightRect
                anchors.fill: parent
                color: "lightgreen"
            }
        }
    }
    Component {
        id: header
        Rectangle {
            width: ListView.view.currentItem.width
            height: ListView.view.currentItem.height
            color: "red"
            Text {
                anchors.centerIn: parent
                text: "Header"
            }
        }
    }
    Component {
        id: footer
        Rectangle {
            width: ListView.view.currentItem.width
            height: ListView.view.currentItem.height
            color: "yellow"
            Text {
                anchors.centerIn: parent
                text: "Footer"
            }
        }
    }
    Component {
        id: dlg
        Item {
            width: 50
            height: 50
            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                text: index
            }
        }
    }

    ///////////////// GridView ////////////////////
    Rectangle {
        id: gridViewExam
        width: parent.width
        border.color: "black"
        anchors.bottom: root.bottom
        anchors.top: listViewExam.bottom
        GridView {
            anchors.fill: parent
            anchors.margins: 20
            anchors.centerIn: parent
            clip: true
            model: gridModel
            delegate: dlg2
            // 单元格大小
            cellWidth: 60
            cellHeight: 60
            // 从上到下，从右到左
            flow: GridView.TopToBottom
            layoutDirection: Qt.RightToLeft
            focus: true
        }
        Rectangle {
            property int count: gridModel.count

            id: btn
            width: 100
            height: 30
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            color: "white"
            border.color: "black"
            Text {
                anchors.centerIn: parent
                text: "ADD"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    gridModel.append({ "number": ++parent.count })
                }
            }
        }
    }
    Component {
        id: dlg2
        Rectangle {
            id: wrapper
            width: 50
            height: 50
            // DEBUG: Failed for color changed
            color: ListView.isCurrentItem ? "lightblue" : "gray"
            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                text: number
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (!wrapper.GridView.delayRemove) {
                        gridModel.remove(index);
                    }
                }
            }
            GridView.onRemove: SequentialAnimation {
                // 代理销毁延迟
                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
                NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
            }
            GridView.onAdd: SequentialAnimation {
                NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }
            }
        }
    }
    ListModel {
        id: gridModel
            ListElement { number: 1 }
            ListElement { number: 2 }
            ListElement { number: 3 }
            ListElement { number: 4 }
            ListElement { number: 5 }
            ListElement { number: 6 }
            ListElement { number: 7 }
            ListElement { number: 8 }
            ListElement { number: 9 }
            ListElement { number: 10 }
    }
}
